---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import HeroSection from '../components/HeroSection.astro';
---

<Layout title="关于我们公司 - OpenAuth.Net">
  <Header />
  <main>
    <HeroSection 
      title="关于 OpenAuth.Net" 
      highlightText="OpenAuth.Net"
      description="我们的使命是致力于做.Net领域最简洁易用的权限工作流框架。"
    />
    
    <section class="py-16 bg-white dark:bg-gray-800">
      <div class="container-custom">
        <div class="grid md:grid-cols-2 gap-12 items-center mb-24">
          <div>
            <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-secondary-900 text-secondary-600 dark:text-secondary-300 font-medium text-sm mb-4">
              我们的故事
            </span>
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">从一个想法开始到完整的解决方案</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">
              OpenAuth.Net始于多年前一个简单的想法：致力于做.Net领域最简洁易用的权限工作流框架。从最初的两名充满激情的开发人员小团队，发展成为服务上千家的创业公司。
            </p>
            <p class="text-gray-600 dark:text-gray-300 mb-4">
              我们的旅程并非一帆风顺，但我们对创新、质量和客户成功的承诺始终如一。今天，我们帮助企业转变其运营并取得显著成果。
            </p>
            <p class="text-gray-600 dark:text-gray-300">
              随着我们的不断发展，我们仍然致力于我们的核心使命：致力于做.Net领域最简洁易用的权限工作流框架。
            </p>
          </div>
          <div class="rounded-lg overflow-hidden shadow-xl">
            <svg viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
          <!-- 定义滤镜和渐变 -->
          <defs>
            <!-- 背景渐变 -->
            <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#1a237e" stop-opacity="0.8"/>
              <stop offset="100%" stop-color="#283593" stop-opacity="0.6"/>
            </linearGradient>
            
            <!-- 3D效果滤镜 -->
            <filter id="shadow3D" x="-20%" y="-20%" width="140%" height="140%">
              <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
              <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
              <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
              <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
            
            <!-- 发光效果 -->
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="5" result="blur"/>
              <feComposite in="SourceGraphic" in2="blur" operator="over"/>
            </filter>
            
            <!-- 高光效果 -->
            <linearGradient id="highlight" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="white" stop-opacity="0.7"/>
              <stop offset="100%" stop-color="white" stop-opacity="0.1"/>
            </linearGradient>
            
            <!-- 定义箭头 -->
            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
                markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#4fc3f7"/>
            </marker>
            
            <!-- 定义虚线动画 -->
            <pattern id="dashPattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(45)">
              <line x1="0" y1="10" x2="20" y2="10" stroke="#4fc3f7" stroke-width="2" stroke-dasharray="5,5">
                <animate attributeName="stroke-dashoffset" values="0;20" dur="1s" repeatCount="indefinite"/>
              </line>
            </pattern>
            
            <!-- 定义网格 -->
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <rect width="40" height="40" fill="none" stroke="#4fc3f7" stroke-width="0.5" stroke-opacity="0.2"/>
            </pattern>
          </defs>
          
          <!-- 背景 -->
          <rect width="800" height="600" fill="url(#bgGradient)"/>
          <rect width="800" height="600" fill="url(#grid)" opacity="0.3">
            <animate attributeName="opacity" values="0.2;0.4;0.2" dur="10s" repeatCount="indefinite"/>
          </rect>
          
          <!-- 3D平台底座 -->
          <g transform="translate(400, 350) scale(1, 0.5) rotate(0)">
            <ellipse cx="0" cy="0" rx="300" ry="200" fill="#283593" stroke="#4fc3f7" stroke-width="2" opacity="0.7" filter="url(#shadow3D)">
              <animate attributeName="opacity" values="0.6;0.8;0.6" dur="5s" repeatCount="indefinite"/>
            </ellipse>
            <ellipse cx="0" cy="0" rx="250" ry="150" fill="#3949ab" stroke="#4fc3f7" stroke-width="1" opacity="0.5"/>
          </g>
          
          <!-- 中央处理单元 -->
          <g transform="translate(400, 300)">
            <!-- 中央服务器 -->
            <g transform="translate(0, -20) scale(0.8)">
              <rect x="-50" y="-60" width="100" height="120" rx="5" ry="5" fill="#1a237e" stroke="#4fc3f7" stroke-width="2" filter="url(#shadow3D)"/>
              <rect x="-40" y="-50" width="80" height="20" rx="2" ry="2" fill="#4fc3f7" opacity="0.7"/>
              <rect x="-40" y="-20" width="80" height="20" rx="2" ry="2" fill="#4fc3f7" opacity="0.5"/>
              <rect x="-40" y="10" width="80" height="20" rx="2" ry="2" fill="#4fc3f7" opacity="0.3"/>
              <circle cx="0" cy="40" r="10" fill="#4fc3f7">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
              </circle>
              <text x="0" y="70" text-anchor="middle" fill="white" font-size="14" font-weight="bold">核心引擎</text>
            </g>
            
            <!-- 旋转光环 -->
            <circle cx="0" cy="-20" r="70" fill="none" stroke="#4fc3f7" stroke-width="2" opacity="0.5">
              <animate attributeName="r" values="70;80;70" dur="5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.3;0.6;0.3" dur="5s" repeatCount="indefinite"/>
              <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite"/>
            </circle>
            <circle cx="0" cy="-20" r="90" fill="none" stroke="#4fc3f7" stroke-width="1" opacity="0.3">
              <animate attributeName="r" values="90;100;90" dur="7s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.2;0.4;0.2" dur="7s" repeatCount="indefinite"/>
              <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="25s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 左侧：人物和移动设备 -->
          <g transform="translate(150, 250)">
            <!-- 人物轮廓 -->
            <g transform="translate(0, 0) scale(0.7)">
              <!-- 头部 -->
              <circle cx="0" cy="-50" r="25" fill="#3949ab" stroke="#4fc3f7" stroke-width="2" filter="url(#shadow3D)"/>
              <!-- 身体 -->
              <path d="M 0 -25 L 0 50 M -30 0 L 30 0 M -15 50 L -15 100 M 15 50 L 15 100" 
                stroke="#4fc3f7" stroke-width="4" fill="none" stroke-linecap="round"/>
              <!-- 手持设备 -->
              <rect x="35" y="-10" width="30" height="50" rx="5" ry="5" fill="#1a237e" stroke="#4fc3f7" stroke-width="2"/>
              <rect x="40" y="0" width="20" height="30" rx="2" ry="2" fill="#4fc3f7" opacity="0.5"/>
              <text x="0" y="130" text-anchor="middle" fill="white" font-size="14" font-weight="bold">用户</text>
            </g>
            
            <!-- 移动设备到中央的连接 -->
            <path d="M 50 0 C 100 -50, 150 -100, 250 -50" fill="none" stroke="#4fc3f7" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)">
              <animate attributeName="stroke-dashoffset" values="0;100" dur="10s" repeatCount="indefinite"/>
            </path>
            
            <!-- 数据流动画 -->
            <circle cx="100" cy="-20" r="5" fill="#4fc3f7" filter="url(#glow)">
              <animate attributeName="cx" values="50;250" dur="3s" begin="0s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="0;-50" dur="3s" begin="0s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0;1;0" dur="3s" begin="0s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 右侧：计算机工作站 -->
          <g transform="translate(650, 250)">
            <!-- 计算机 -->
            <g transform="translate(0, 0) scale(0.7)">
              <!-- 显示器 -->
              <rect x="-40" y="-60" width="80" height="60" rx="5" ry="5" fill="#1a237e" stroke="#4fc3f7" stroke-width="2" filter="url(#shadow3D)"/>
              <rect x="-35" y="-55" width="70" height="50" rx="2" ry="2" fill="#4fc3f7" opacity="0.3"/>
              <!-- 支架 -->
              <rect x="-5" y="0" width="10" height="20" fill="#3949ab" stroke="#4fc3f7" stroke-width="1"/>
              <!-- 底座 -->
              <rect x="-30" y="20" width="60" height="10" rx="5" ry="5" fill="#3949ab" stroke="#4fc3f7" stroke-width="1"/>
              <!-- 键盘 -->
              <rect x="-50" y="40" width="100" height="10" rx="2" ry="2" fill="#1a237e" stroke="#4fc3f7" stroke-width="1"/>
              <text x="0" y="70" text-anchor="middle" fill="white" font-size="14" font-weight="bold">审批终端</text>
            </g>
            
            <!-- 计算机到中央的连接 -->
            <path d="M -50 0 C -100 -50, -150 -100, -250 -50" fill="none" stroke="#4fc3f7" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)">
              <animate attributeName="stroke-dashoffset" values="0;100" dur="10s" repeatCount="indefinite"/>
            </path>
            
            <!-- 数据流动画 -->
            <circle cx="-100" cy="-20" r="5" fill="#4fc3f7" filter="url(#glow)">
              <animate attributeName="cx" values="-50;-250" dur="3s" begin="1s" repeatCount="indefinite"/>
              <animate attributeName="cy" values="0;-50" dur="3s" begin="1s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0;1;0" dur="3s" begin="1s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 顶部：云服务 -->
          <g transform="translate(400, 100)">
            <!-- 云图标 -->
            <path d="M -40 0 
                     C -40 -20 -20 -30 0 -30 
                     C 10 -50 40 -50 50 -30 
                     C 70 -30 90 -10 80 10 
                     C 90 20 80 40 60 40 
                     C 50 50 20 50 10 40 
                     C 0 50 -30 50 -30 30 
                     C -60 30 -60 0 -40 0 Z" 
                  fill="#3949ab" stroke="#4fc3f7" stroke-width="2" filter="url(#shadow3D)"/>
            
            <!-- 云内部装饰 -->
            <circle cx="-10" cy="0" r="10" fill="#4fc3f7" opacity="0.3"/>
            <circle cx="20" cy="10" r="15" fill="#4fc3f7" opacity="0.2"/>
            <text x="0" y="60" text-anchor="middle" fill="white" font-size="14" font-weight="bold">云服务</text>
            
            <!-- 云到中央的连接 -->
            <path d="M 0 40 L 0 130" fill="none" stroke="#4fc3f7" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)">
              <animate attributeName="stroke-dashoffset" values="0;100" dur="10s" repeatCount="indefinite"/>
            </path>
            
            <!-- 数据流动画 -->
            <circle cx="0" cy="70" r="5" fill="#4fc3f7" filter="url(#glow)">
              <animate attributeName="cy" values="40;130" dur="2s" begin="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0;1;0" dur="2s" begin="2s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 底部：移动应用 -->
          <g transform="translate(400, 480)">
            <!-- 手机图标 -->
            <rect x="-25" y="-40" width="50" height="80" rx="5" ry="5" fill="#1a237e" stroke="#4fc3f7" stroke-width="2" filter="url(#shadow3D)"/>
            <rect x="-20" y="-30" width="40" height="60" rx="2" ry="2" fill="#4fc3f7" opacity="0.2"/>
            <circle cx="0" cy="40" r="8" fill="#4fc3f7" opacity="0.5"/>
            <text x="0" y="60" text-anchor="middle" fill="white" font-size="14" font-weight="bold">移动应用</text>
            
            <!-- 应用到中央的连接 -->
            <path d="M 0 -40 L 0 -130" fill="none" stroke="#4fc3f7" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)">
              <animate attributeName="stroke-dashoffset" values="0;100" dur="10s" repeatCount="indefinite"/>
            </path>
            
            <!-- 数据流动画 -->
            <circle cx="0" cy="-70" r="5" fill="#4fc3f7" filter="url(#glow)">
              <animate attributeName="cy" values="-40;-130" dur="2s" begin="3s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0;1;0" dur="2s" begin="3s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 工作流程文字 -->
          <g transform="translate(400, 350) rotate(0)">
            <text x="0" y="0" text-anchor="middle" fill="white" font-size="18" font-weight="bold" filter="url(#glow)">
              <tspan x="0" dy="0">OpenAuth.Net</tspan>
              <tspan x="0" dy="25">工作流引擎</tspan>
            </text>
          </g>
          
          <!-- 装饰性粒子 -->
          <g>
            <circle cx="200" cy="150" r="3" fill="#4fc3f7" opacity="0.7">
              <animate attributeName="opacity" values="0.3;1;0.3" dur="4s" begin="0s" repeatCount="indefinite"/>
            </circle>
            <circle cx="600" cy="150" r="3" fill="#4fc3f7" opacity="0.7">
              <animate attributeName="opacity" values="0.3;1;0.3" dur="5s" begin="1s" repeatCount="indefinite"/>
            </circle>
            <circle cx="300" cy="450" r="3" fill="#4fc3f7" opacity="0.7">
              <animate attributeName="opacity" values="0.3;1;0.3" dur="6s" begin="2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="500" cy="450" r="3" fill="#4fc3f7" opacity="0.7">
              <animate attributeName="opacity" values="0.3;1;0.3" dur="7s" begin="3s" repeatCount="indefinite"/>
            </circle>
          </g>
          
          <!-- 3D旋转效果 -->
          <g transform="translate(400, 300)">
            <g transform="rotate3d(1, 1, 0, 30deg)">
              <circle cx="0" cy="0" r="150" fill="none" stroke="#4fc3f7" stroke-width="0.5" opacity="0.2">
                <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="30s" repeatCount="indefinite"/>
              </circle>
            </g>
          </g>
          
          <!-- 光束效果 -->
          <g opacity="0.3">
            <path d="M 400 100 L 400 500" stroke="url(#highlight)" stroke-width="50" opacity="0.1">
              <animate attributeName="opacity" values="0.05;0.2;0.05" dur="5s" repeatCount="indefinite"/>
            </path>
            <path d="M 150 250 L 650 250" stroke="url(#highlight)" stroke-width="30" opacity="0.1">
              <animate attributeName="opacity" values="0.05;0.15;0.05" dur="7s" repeatCount="indefinite"/>
            </path>
          </g>
        </svg>
          </div>
        </div>
        
        <div class="mb-24">
          <div class="text-center mb-12">
            <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-secondary-900 text-secondary-600 dark:text-secondary-300 font-medium text-sm mb-4">
              我们的价值观
            </span>
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">我们的立场</h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
              我们的价值观指导着我们所做的一切，从我们如何构建产品到我们如何与客户和彼此互动。
            </p>
          </div>
          
          <div class="grid md:grid-cols-3 gap-8">
            <div class="card p-6 border border-gray-200 dark:border-gray-700">
              <div class="rounded-full bg-primary-100 dark:bg-primary-900 p-3 w-12 h-12 flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">信任与透明</h3>
              <p class="text-gray-600 dark:text-gray-300">
                我们相信通过透明度建立信任。我们对我们的流程、定价和政策保持开放，并始终努力为客户做正确的事情。
              </p>
            </div>
            
            <div class="card p-6 border border-gray-200 dark:border-gray-700">
              <div class="rounded-full bg-primary-100 dark:bg-primary-900 p-3 w-12 h-12 flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">创新与卓越</h3>
              <p class="text-gray-600 dark:text-gray-300">
                我们不断突破可能的边界，寻找解决复杂问题的新方法，并为客户提供卓越的价值。
              </p>
            </div>
            
            <div class="card p-6 border border-gray-200 dark:border-gray-700">
              <div class="rounded-full bg-primary-100 dark:bg-primary-900 p-3 w-12 h-12 flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">客户成功</h3>
              <p class="text-gray-600 dark:text-gray-300">
                我们客户的成功就是我们的成功。我们致力于提供客户实现目标所需的支持、资源和工具。
              </p>
            </div>
          </div>
      
      </div>
    </section>
  </main>
  <Footer />
</Layout> 
